<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算命结果 - 在线占卜</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🔮 您的运势结果</h1>
        </header>
        
        <main>
            <div class="result-container">
                <div class="user-info-card">
                    <h2>基本信息</h2>
                    <div class="info-item">
                        <span class="label">姓名：</span>
                        <span id="userName"></span>
                    </div>
                    <div class="info-item">
                        <span class="label">出生日期：</span>
                        <span id="userBirthDate"></span>
                    </div>
                    <div class="info-item">
                        <span class="label">性别：</span>
                        <span id="userGender"></span>
                    </div>
                    <div class="info-item">
                        <span class="label">城市：</span>
                        <span id="userCity"></span>
                    </div>
                </div>
                
                <div class="weather-card" id="weatherCard" style="display: none;">
                    <h2>🌤️ 今日天气</h2>
                    <div class="weather-info">
                        <div class="weather-main">
                            <span class="weather-temp" id="weatherTemp"></span>
                            <span class="weather-desc" id="weatherDesc"></span>
                        </div>
                        <div class="weather-details">
                            <div class="weather-item">
                                <span class="weather-label">温度范围：</span>
                                <span id="weatherTempRange"></span>
                            </div>
                            <div class="weather-item">
                                <span class="weather-label">风力风向：</span>
                                <span id="weatherWind"></span>
                            </div>
                            <div class="weather-item">
                                <span class="weather-label">空气质量：</span>
                                <span id="weatherAir"></span>
                            </div>
                            <div class="weather-item">
                                <span class="weather-label">湿度：</span>
                                <span id="weatherHumidity"></span>
                            </div>
                        </div>
                        <div class="weather-update">
                            <small>更新时间: <span id="weatherUpdate"></span></small>
                        </div>
                    </div>
                </div>
                
                <div class="fortune-card">
                    <h2>生肖星座</h2>
                    <div class="zodiac-info">
                        <div class="zodiac-item">
                            <span class="zodiac-label">生肖：</span>
                            <span class="zodiac-value" id="zodiac"></span>
                        </div>
                        <div class="zodiac-item">
                            <span class="zodiac-label">星座：</span>
                            <span class="zodiac-value" id="constellation"></span>
                        </div>
                    </div>
                </div>
                
                <div class="fortune-card">
                    <h2>今日运势</h2>
                    <div class="fortune-content">
                        <p id="fortuneText"></p>
                    </div>
                </div>
                
                <div class="lucky-card">
                    <h2>幸运元素</h2>
                    <div class="lucky-items">
                        <div class="lucky-item">
                            <span class="lucky-label">幸运数字：</span>
                            <span class="lucky-value" id="luckyNumber"></span>
                        </div>
                        <div class="lucky-item">
                            <span class="lucky-label">幸运颜色：</span>
                            <span class="lucky-value" id="luckyColor"></span>
                        </div>
                    </div>
                </div>
                
                <div class="actions">
                    <button onclick="goBack()" class="back-btn">重新算命</button>
                </div>
            </div>
        </main>
    </div>
    
    <script src="result.js"></script>
</body>
</html>